/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  BlobInputList, CCell, Cell, Input, Table, TableBody, TableHead, TableRow, Text,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {usePrefixDataTable} from "../../hook/usePrefixData";
import {useMeasureInpFilter} from "../../common/hooks";
import {FootMenRow} from "../../contain/rarelyVary";
import {SimpleImg} from "../../../comp/Image";
import Img_WaterPrs from "./ExWaterPres.png";
import {Each_ZdSetting, useContentTableViewer, useTableEditor} from "../../hook/useRepTableEditor";

/**公用的模板：@尽量避免碰见”外*“。
 * */
export const config外水压试 = [
  [['公称工作压力', {n:'外工作压',u:'MPa'}], ['试验介质/介质温度',{n:'外介质温',u:' ℃'}] ],
  [['压力表量程/精度', '外压表量',], ['压力表编号', '外压表号', ]],
  [['试验标准', '外试标准',], ['试验方法', '外试方法'] ],
  [['试验压力',  {n:'外试验压',u:'MPa'}], [' ', {r:' '}] ],
];
//水压试验结果记录表
const config外压记表 = [['气瓶编号', 'n', 130], ['实际试验压力(MPa)', 'y', 120], ['气瓶容积(L)', 'L', 100],
  ['全膨胀量(ml)', 'p', 100], ['残余变形量(ml)', 'x', 100], ['残余变形率(%)', 'r', 100, ]] as Each_ZdSetting[];
export const itemA外水压=['外保时公','外保时试', '外水压果','外压记表'];
const itemA水压试m=['外工作压','外试验压', ...itemA外水压];
export const ExterHydraulicRes=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,refWidth}:InternalItemProps,  ref
    ) => {
      const {inp, setInp} = useItemInputControl({ ref });
      const headview=<Text variant="h5">
        水压试验结果记录表。
      </Text>;
      const [render]=useTableEditor({inp, setInp,  headview,
                     config: config外压记表, table: '外压记表',  maxRf:3 });
      const [getInpFilter]=useMeasureInpFilter(null,itemA水压试m,);
      return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                  nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">{label}:</Text>
        <Text variant="h6">试 验 程 序：</Text>
        <hr/>
        <div>缓慢升至公称压力：
          <Input value={inp?.外工作压 || ''} size={7} style={{display: 'inline-flex', width: 'unset'}}
                 onChange={e => setInp({...inp, 外工作压: e.currentTarget.value || undefined})}/>
          MPa，保压
          <Input value={inp?.外保时公 || ''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                 onChange={e => setInp({...inp, 外保时公: e.currentTarget.value || undefined})}/>
          min；
          确认无泄漏后，再缓慢升压至试验压力：
          <Input value={inp?.外试验压 || ''} size={7} style={{display: 'inline-flex', width: 'unset'}}
                 onChange={e => setInp({...inp, 外试验压: e.currentTarget.value || undefined})}/>
          MPa，保压
          <Input value={inp?.外保时试 || ''} size={4} style={{display: 'inline-flex', width: 'unset'}}
                 onChange={e => setInp({...inp, 外保时试: e.currentTarget.value || undefined})}/>
          min；
          记录试验数据后，泄压至 0 MPa
        </div>
        {render}
        <hr/>
        <Text variant="h5">外测法水压试验-试验结果：</Text>
        <BlobInputList value={inp?.外水压果 || ''} rows={4} datalist={['合格。']}
                       onListChange={v => setInp({...inp, 外水压果: v || undefined})}/>
      </InspectRecordLayout>;
});

export const ExterHydraulicVw = ({orc, rep, op}: { orc: any, rep: any, op?: boolean }
) => {
  const renderUpper = usePrefixDataTable({config: config外水压试, orc, rep, slash: true});
  const [renderHead, renderRows] = useContentTableViewer(config外压记表, orc?.外压记表, true, true);
  return <>
    <div css={{"@media print": {paddingBottom: '4rem', pageBreakInside: 'avoid'}}}>
      <Text id='ExterHydraulic' variant="h2" css={{
        textAlign: 'center', marginTop: '1rem',
      }}>外测法水压试验报告</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text>使用证号：{orc?.使用证号}</Text>
        <Text>{op ? '记录' : '报告'}编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["7%", "5.1%", "%", "8%", "8.9%", "31%"] }
           css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4rem'}}} tight miniw={800}>
      <TableBody>
        <RepLink rep={rep} tag={"ExterHydraulic"}>
          {renderUpper}
        </RepLink>
        <RepLink rep={rep} tag={"ExterHydraulicRes"}>
          <TableRow><Cell colSpan={6}>试验程序示意图</Cell></TableRow>
          <TableRow><CCell colSpan={6}>
            <SimpleImg url={Img_WaterPrs} />
          </CCell></TableRow>
          <TableRow><Cell colSpan={6}>
            <div css={{width: 'fit-content', margin: 'auto'}}>
              缓慢升至公称压力：{orc?.外工作压??'／'} MPa，保压 {orc?.外保时公??'／'} min；<br/>
              确认无泄漏后，再缓慢升压至试验压力：{orc?.外试验压??'／'} MPa，保压 {orc?.外保时试??'／'} min；<br/>
              记录试验数据后，泄压至 0 MPa
            </div>
          </Cell></TableRow>
          <TableRow><CCell colSpan={6}>水压试验结果记录表</CCell></TableRow>
          <TableRow>
            <CCell split css={{padding:0}} colSpan={6}>
              <Table  fixed={ ["22%","17.6%","16%","15%","15%","%"]  }
                      css={ {borderCollapse: 'collapse', height:'fill-available'} } tight  miniw={800}>
                <TableHead>
                  {renderHead}
                </TableHead>
                <TableBody>
                  <RepLink rep={rep} tag={"ExterHydraulicRes"}>
                    {renderRows}
                  </RepLink>
                </TableBody>
              </Table>
            </CCell>
          </TableRow>
          <TableRow>
            <Cell colSpan={6}><div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'}}>
              试验结果：<br/>
              {orc?.外水压果 || '／'}
            </div></Cell>
          </TableRow>
        </RepLink>
      </TableBody>
      <FootMenRow span={6} orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
    </Table>
  </>;
};
